<template>
    <div class="contentList">
        <!-- <a-row justify="space-between">
            <a-col :span="6">
                <img src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" style="display:block;width:100%" alt="">
                <span>20200908-IMG-111</span>
            </a-col>
        </a-row> -->
        <a-list :grid="{gutter:20, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 3 }" :data-source="data">
            <a-list-item slot="renderItem" slot-scope="item,index" @dblclick="showImgDetail(index)">
                <a-tooltip :mouseEnterDelay="1" placement="rightTop" >
                    <a-dropdown :trigger="['contextmenu']">
                        <a-card>
                            <img :src="item.imgSrc" alt="">
                            <span>{{item.title}}</span>
                        </a-card>
                        <a-menu slot="overlay">
                            <a-menu-item key="1">
                                认领
                            </a-menu-item>
                            <a-menu-item key="2" @click="showImgDetail(index)">
                                查看
                            </a-menu-item>
                            <a-menu-item key="3">
                                删除
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                    <template slot="title">
                        <p>名称：20200729_IMG_1111</p>
                        <p>添加时间：20200729_IMG_1111</p>
                        <p>操作人：299388</p>
                    </template>
                </a-tooltip>
            </a-list-item>
        </a-list>
    </div>
</template>
<script>
export default {
    name:"imgContentList",
    components:{},
    data(){
        return{
            data:[
                {
                    title:"20200908-IMG-111",
                    imgSrc:"https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
                },
                {
                    title:"20200908-IMG-222",
                    imgSrc:"https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
                },
                {
                    title:"20200908-IMG-333",
                    imgSrc:"https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
                },
                {
                    title:"20200908-IMG-444",
                    imgSrc:"https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
                }
            ]
        }
    },
    mounted(){
        //this.mouseFllow();
    },
    methods:{
        showImgDetail(index){
            console.log(1111);
            this.$emit('func',index);
        }
        //mouseFllow() {
            // 鼠标跟随tip
            // var sgTip = document.querySelector("a-tip");
            // document.onmousemove = function (e) {
            //     var x = e.pageX,
            //         y = e.pageY,
            //         offset = 20;
            //     sgTip.style.left = x + offset + "px";
            //     sgTip.style.top = y + offset + "px";
            // };
        //}
    }
}
</script>
<style lang="less">
.contentList{
    padding: 0 16px;
}
    .ant-list-item .ant-card-body{
        padding:0;
    }
    .ant-list-item .ant-card-body img{
        width:100%;
    }
    .ant-list-item .ant-card-body span{
        display: block;
        text-align: center;
        padding: 0 10px;
        line-height: 40px;
    }
</style>